<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-if="revampDetailsModal" v-show="revampDetailsModal.isShow">
      <div class="modal-ctrl-main even-row-ctrl" >

        <div class="modal-title">
          <p>部门详情</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <div class="modal-row" >
              <div class="modal-form-key f-l">
                部门名称：
              </div>
              <input type="text" v-model="sectionParams.stationName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否使用：
              </div>
              <select @change="selectIfUse" :value="sectionParams.ifUse" disabled="disabled">
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                父部门：
              </div>
              <input type="text" v-model="stationName" class="modal-text f-l"  readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                IP地址：
              </div>
              <input type="text" class="modal-text f-l" v-model="sectionParams.ipAddress" placeholder="格式必须如：196.168.0.1" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                地址：
              </div>
              <input type="text" v-model="sectionParams.address" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                联系电话：
              </div>
              <input type="text" v-model="sectionParams.tel" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                组织代码：
              </div>
              <input type="text" v-model="sectionParams.orgcode" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                部门类型：
              </div>
              <select @change="selectStationNum" v-model="sectionParams.stationNum" disabled="disabled">
                <option value="-1">请选择部门类型</option>
                <option value="SJ">市局-SJ</option>
                <option value="FJ">分局-FJ</option>
                <option value="ZSJG">直属机构-ZSJG</option>
                <option value="JG">交管-JG</option>
                <option value="PCS">派出所-PCS</option>
                <option value="JCZ">检查站-JCZ</option>
                <option value="JWZ">警务站-JWZ</option>
              </select>
              <!--<input type="text" v-model="sectionParams.stationNum" class="modal-text f-l" readonly="readonly">-->
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                覆盖范围：
              </div>
              <input type="text" v-model="sectionParams.coverRange" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警车数量：
              </div>
              <input type="text" v-model="sectionParams.carCount" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                基地台号：
              </div>
              <input type="text" v-model="sectionParams.baseNum" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                单位编码：
              </div>
              <input type="text" v-model="sectionParams.unitNumber" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                经度：
              </div>
              <input type="text" v-model="sectionParams.longitude" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                纬度：
              </div>
              <input type="text" v-model="sectionParams.latitude" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                排序：
              </div>
              <input type="text" maxlength="4" placeholder="最长4位字符" v-model="sectionParams.sort" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                管辖区域：
              </div>
              <input type="text" :title="sectionParams.glxq" v-model="sectionParams.glxq" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                人口情况：
              </div>
              <input type="text" :title="sectionParams.rkqk" v-model="sectionParams.rkqk" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                社区/责任区：
              </div>
              <input type="text" :title="sectionParams.sqzrq" v-model="sectionParams.sqzrq" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警力情况：
              </div>
              <input type="text" :title="sectionParams.jlqk" v-model="sectionParams.jlqk" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                重点部位：
              </div>
              <input type="text" :title="sectionParams.zdbw" v-model="sectionParams.zdbw" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                重点警情：
              </div>
              <input type="text" :title="sectionParams.zdjq" v-model="sectionParams.zdjq" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否直属机构：
              </div>
              <select @change="selectisZsjg" :value="sectionParams.isZsjg" disabled="disabled">
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </div>

        <!--    <div class="modal-row">
              <div class="modal-form-key f-l">
                是否口子所：
              </div>
              <select @change="selectisCzs" :value="sectionParams.isCzs" disabled="disabled">
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </div>-->

            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否为业务部门：
              </div>
              <select :value="sectionParams.isBusinessDepartment" disabled="disabled">
                <option value="0">否</option>
                <option value="1">是</option>
              </select>
            </div>

          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-info" @click="closeModal">关闭</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "SectionDetalis",
    props:["revampDetailsModal","sectionId"],
    data(){
      return{
        //警员信息
        sectionParams:{
          stationName:"", //部门名称
          ifUse:"1", //是否使用
          parentId:"", //父部门
          ipAddress:"", //IP地址
          address:"", //地址
          tel:"", //联系电话
          orgcode:"",  //组织代码
          stationNum:"", //组织编号
          coverRange:"", //覆盖范围
          carCount:"", //警车数量
          baseNum:"", //基地台号
          unitNumber:"", //单位编码
          longitude:"", //经度
          latitude:"", //纬度
          sort:"", //排序
          glxq:"", //管辖区域
          rkqk:"", //人口情况
          sqzrq:"", //社区/责任区
          jlqk:"", //警力情况
          zdbw:"", //重点部位
          zdjq:"", //重点警情
          isZsjg:"0", //是否直属机构
          isCzs:"0", //是否口子所
          isBusinessDepartment:"0"
        },
        stationName:"",
        //缓存信息
        getSessionStorage:{},
        policeType:[],
        policePosition:[],
        setting : {
          data: {
            simpleData: {
              enable: true
            },
          },
          check:{
            chkStyle:"checkbox",
            chkboxType:{ "Y": "ps", "N": "ps" },
            enable:true
          }
        },
        sectionTreeIShow:false,
        activeSectionId:""
      }
    },
    mounted(){
      let _this = this;
      this.setting.callback = {
        onClick:function(event,treeId,treeNode){ //新增警员部门树选择
          //console.log(treeNode);
          _this.stationName = treeNode.name;
          _this.sectionParams.parentId = treeNode.id;
          _this.sectionTreeIShow = false;
        }
      };
    },
    created(){
      //设置缓存
      //this.getSessionStorage = JSON.parse(sessionStorage.getItem("stationCommunication"));
      // //console.log(this.getSessionStorage);
      //部门名称
      //this.stationName = this.getSessionStorage.name;
      //部门id
      //this.policeData.stationId = this.getSessionStorage.id;
      //警员类型列表
      //this.policeTypeFn();
      //警员岗位列表
      //this.policePositionFn();
      //日期控件
      $(function () {
        //console.log($("#datetimepicker"));
        $('#date1').datetimepicker({
          language: "zh-CN",
          format: "yyyy-mm-dd",
          minView: "month",
          autoclose: true
        }).on("changeDate",function(ev){
          ////console.log(ev.date.valueOf());
        });
      });
    },
    watch:{
      revampDetailsModal:{
        handler(v1){
          //console.log(v1);
          if( v1.isShow === true ){ //监听弹窗变化。
            //console.log(v1);
            //console.log(this.sectionId);
            this.activeSectionId = this.sectionId;
            //let session = JSON.parse(sessionStorage.getItem("stationCommunication"));
            //this.getSessionStorage.name = session.name;
            //this.getSessionStorage.id = session.id;
            //this.policeData.stationId = this.getSessionStorage.id;
            //this.stationName = this.getSessionStorage.name;
            ////console.log(session);
            //获取查询部门信息
            this.getSectionAjax();
          }
        },
        deep:true
      }
    },
    methods:{
      //是否使用
      selectIfUse(ele){
        this.sectionParams.ifUse = ele.target.value;
        ////console.log(ele.target.value);
      },
      //部门类型
      selectStationNum(ele){
        this.sectionParams.stationNum = ele.target.value;
        ////console.log(ele.target.value);
      },
      //是否直属机构
      selectisZsjg(ele){
        this.sectionParams.isZsjg = ele.target.value;
        ////console.log(ele.target.value);
      },
      //是否口子所
      selectisCzs(ele){
        this.sectionParams.isCzs = ele.target.value;
        ////console.log(ele.target.value);
      },
      //查询部门数据
      getSectionAjax(){
        //console.log(this.activeSectionId);
        this.$axios.get(this.HOST+"/station/"+this.activeSectionId)
          .then((data)=>{
            //console.log(data);
            let successData = data.data;
            //console.log(successData);
            for( let sectionParamsKey in this.sectionParams ){
              for( let successDataKey in successData ){
                if( sectionParamsKey === successDataKey ){
                  this.sectionParams[successDataKey] = successData[sectionParamsKey];
                }
              }
            }
            this.stationName = successData.parentId;
            //console.log(this.sectionParams);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //关闭模态窗
      closeModal(){
        this.$emit("closeModalDetailsModal");
      },
      //清除新增部门
      /*initAddSectionData(){
        this.sectionParams={
          stationName:"", //部门名称
          ifUse:"1", //是否使用
          parentId:"", //父部门
          ipAddress:"", //IP地址
          address:"", //地址
          tel:"", //联系电话
          orgcode:"",  //组织代码
          stationNum:"", //组织编号
          coverRange:"", //覆盖范围
          carCount:"", //警车数量
          baseNum:"", //基地台号
          unitNumber:"", //单位编码
          longitude:"", //经度
          latitude:"", //纬度
          sort:"", //排序
          glxq:"", //管辖区域
          rkqk:"", //人口情况
          sqzrq:"", //社区/责任区
          jlqk:"", //警力情况
          zdbw:"", //重点部位
          zdjq:"", //重点警情
          isZsjg:"0", //是否直属机构
          isCzs:"0", //是否口子所
          isBusinessDepartment:"0"
        }
      }*/
    }
  }
</script>

<style scoped>

</style>
